<template>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- 卡片头部位置 -->
        <div slot="header" class="header">
          <span>线上搜索</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 卡片身体位置 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <div class="charts" ref="scatter">123</div>
          </el-col>
          <el-col :span="12" :offset="0">
            <div class="charts" ref="rad">456</div>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table border stripe @sort-change="sort">
          <el-table-column label="排名" width> </el-table-column>
          <el-table-column label="关键字" width> </el-table-column>
          <el-table-column label="用户数" width sortable> </el-table-column>
          <el-table-column label="周涨幅" width sortable> </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          current-page.sync="1"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="3"
          layout="prev, pager,next"
          :total="99"
          background
        >
          :pager-count="7">
        </el-pagination>
      </el-card>
    </el-col>
    <el-col :span="12" :offset="0">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!--右侧卡片头部--->
        <div slot="header" class="header">
          <span>1126在{{ city }}销售额占比</span>
          <el-radio-group v-model="city" size="mini">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>
        <!--由此卡片底部的饼图-->
        <div class="pie" ref="pie"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
//引包
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      //单选按钮收集数据地方
      city: "上海",
    };
  },
  mounted() {
    //初始化两个图形图标
    this.scatter();
    this.radar();
    this.setPie();
  },
  methods: {
    //散点图
    scatter() {
      let mycharts = echarts.init(this.$refs.scatter);
      let option = {
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          show: false,
        },
        series: {
          type: "scatter",
          data: [10, 9, 2, 14, 25, 60],
        },
      };
      //设置配置项
      mycharts.setOption(option);
    },
    //雷达图
    radar() {
      let mycharts = echarts.init(this.$refs.rad);
      let option = {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "发育", max: 6500 },
            { name: "生存", max: 16000 },
            { name: "别浪", max: 30000 },
            { name: "猥琐", max: 38000 },
            { name: "战力", max: 52000 },
            { name: "伏地魔", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      //设置配置项
      mycharts.setOption(option);
    },
    //饼图
    setPie() {
      //初始化
      let mycharts = echarts.init(this.$refs.pie);
      //配置项
      let option = {
        //中间显示数据的套路
        title: {
          //主标题
          text: "核潜艇",
          //子标题
          subtext: 300,
          //调整标题位置
          left: "45%",
          top: "55%",
        },
        tooltip: {
          trigger: "item",
        },
        //顶上切换图形标题
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            top: 100,
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "航母" },
              { value: 735, name: "战斗机" },
              { value: 580, name: "坦克" },
              { value: 484, name: "大炮" },
              { value: 300, name: "核潜艇" },
            ],
          },
        ],
      };
      //设置配置项
      mycharts.setOption(option);

      //ehcarts支持事件！！！
      mycharts.on("mouseover",function (item) {
          //重新设置配置项
          mycharts.setOption({
                title:{
                  text:item.data.name,
                  subtext:item.data.value
                }
          })
      });
    },
    //table排序
    sort() {
      alert(123);
    },
  },
};
</script>

<style scoped lang="scss">
/*今天晚上:好好复习flex布局,项目中常用,面试常问*/
.header {
  display: flex;
  justify-content: space-between;
}
.charts {
  width: 100%;
  height: 280px;
}

::v-deep .el-pagination {
  float: right;
  background-image: linear-gradient(to right, black, white, black);
}
.pie {
  height: 400px;
}
</style>
